<template>
  <div class="dataBrowsing">
    <el-row :gutter="10">
      <el-col :span="18">
        <el-card shadow="never">
          <div slot="header">
            <n-title title="调查对象信息"/>
          </div>
          <survey-model :key="dataId" ref="surveyComp" :structureId="structureId"  tableHeight="30vh"></survey-model>
          <div slot="header" class="header-tool" :key="opreateType">
            <el-button size="small" @click="backHandler">返回预制数据</el-button>
            <el-button size="small" @click="upClick('')" :disabled="activeIndex === 0">上一条</el-button>
            <el-button size="small" @click="upClick('next')" :disabled="activeIndex === prepareIds.length-1">下一条</el-button>
            <el-button v-if="opreateType === '0' && commonForm.prepareStatus!=='2'" size="small" @click="prepareCancel">核销</el-button>
            <el-button v-if="opreateType === '0' && commonForm.prepareStatus==='2'" size="small" @click="unCancel">撤销核销</el-button>
            <el-button v-if="opreateType === '0' && !commonForm.areaId" size="small" @click="relevancyArea">关联区划</el-button>
            <el-button v-if="opreateType === '0' && commonForm.areaId" size="small" @click="cancelArea">撤销区划</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <div slot="header">
            <n-tab :options="[{label:'核查判定'},{label:'质检信息'},{label:'专家抽检'}]"/>
          </div>
          <el-empty/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {Component, Vue,Ref} from 'vue-property-decorator';
import DataTable from "@/components/DataTable/DataTable.vue";
import NTitle from "@/components/NTitle.vue";
import {getUserList} from "@/api/user";
import OpenMap from "@/components/OpenMap.vue";
import NTab from "@/components/NTab.vue";
import SurveyModel from '@/components/SurveyModel.vue';
import router from '@/router/index';
import {getFormData} from '@/api/investDataCommon';
import {prepareIds} from "@/api/dataSearch";
import {cancelArea, prepareCancelById, prepareUnCancel, updateArea} from "@/api/dataPrepare";

@Component({
  methods: {updateArea, getUserList},
  components: {NTab, OpenMap, NTitle, DataTable,SurveyModel}
})
export default class dataVerify extends Vue {
  @Ref("surveyComp") surveyComp:any;
  private structureId: any;
  private dataId:any = '';
  private opreateType:any ='0';
  private cityValue: any = '';
  private prepareIds:any = [];
  private activeIndex:any = null;
  private commonForm:any = {};
  private cityList: any = [
    {
      value: '0471',
      label: '呼和浩特市'
    }
  ]
  columns: any = [
    {label: '名称', prop: 'userName', sortable: 'custom'},
    {label: '地址', prop: 'name', sortable: 'custom'},
    {
      label: '学校(机构)名称', prop: 'dept', formatter: function (row: any) {
        if (row && row.dept && row.dept.deptName) {
          return row.dept.deptName;
        } else {
          return '无';
        }
      }
    },
    {label: '学校(机构)详细地址', prop: 'email', sortable: 'custom', showOverflowTooltip: true},
    {label: '学校(机构)标识码', prop: 'phoneNumber', sortable: 'custom', showOverflowTooltip: true},
    {label: '学校(机构)办学类型(大类)', prop: 'phoneNumber2', sortable: 'custom', showOverflowTooltip: true},
    {label: '数据更新时间', prop: 'createTime', sortable: 'custom', showOverflowTooltip: true},
  ];

  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: true, // 是否支持列表项选中功能
  };


  //按钮操作组
  operates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [
      {
        label: '查看',
        type: 'text',
        icon: 'el-icon-tickets',
        plain: true,
        disabled: (index: any, row: any) => {
          return row && row.id === 221;
        },
        method: (index: any, row: any) => {
          console.log(index, row)
        }
      },
      {
        label: '标错',
        type: 'text',
        icon: 'el-icon-document-delete',
        plain: true,
        style: {
          color: 'red'
        },
        disabled: (index: any, row: any) => {
          return row && row.id === 221;
        },
        method: (index: any, row: any) => {
          console.log(index, row)
        }
      },
      {
        label: '撤销标错',
        type: 'text',
        icon: 'iconfont icon-y-jingpinceshibaogaoshujudaochu',
        plain: true,
        disabled: (index: any, row: any) => {
          return row && row.id === 221;
        },
        method: (index: any, row: any) => {
          console.log(index, row)
        }
      }
    ]
  };
  selectFormModel: any = {
    userName: '',
    status: '',
    phoneNumber: '',
    sex: '',
  };

  backHandler(){
    this.$destroy();
    this.$router.go(-1);

  }
  searchPrepareIds(){
    const {query} = this.$route;
    prepareIds(query).then(res =>{
      if(res && res.data){
        this.prepareIds = res.data
        this.activeIndex = this.prepareIds.findIndex(i=>String(i) === String(this.dataId))
      }
   })
  }
  upClick(status){
    if(status === 'next'){
      this.dataId = this.prepareIds[this.activeIndex+1]
    }else{
      this.dataId = this.prepareIds[this.activeIndex-1]
    }
    this.activeIndex = this.prepareIds.findIndex(i=>String(i) === String(this.dataId))
    this.searchFormData()
  }
  searchFormData(){
    getFormData({id: this.dataId}).then(res =>{
      this.commonForm = res.data.commonForm
      this.surveyComp.addFormData(res.data)
    })
  }
  prepareCancel(){
    this.$msgbox.confirm("是否确认核销",{
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async ()=>{
      await prepareCancelById({id: this.dataId})
      this.$message.success('核销成功')
      this.searchFormData()
      // eslint-disable-next-line @typescript-eslint/no-empty-function
    }).catch(()=>{})
  }
  relevancyArea(){
    this.$msgbox.confirm("是否确认关联区划",{
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async ()=>{
      const {areaId,id} = this.$route.query
      await updateArea({id,areaId})
      this.$message.success('关联成功')
      this.searchFormData()
      // eslint-disable-next-line @typescript-eslint/no-empty-function
    }).catch(()=>{})
  }
  unCancel(){
    this.$msgbox.confirm("是否确认撤销核销",{
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async ()=>{
      await prepareUnCancel(this.dataId)
      this.$message.success('撤销成功')
      this.searchFormData()
      // eslint-disable-next-line @typescript-eslint/no-empty-function
    }).catch(()=>{})
  }
  cancelArea(){
    this.$msgbox.confirm("是否确认撤销区划",{
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async ()=>{
      const {id} = this.$route.query
      await cancelArea({id})
      this.$message.success('撤销成功')
      this.searchFormData()
      // eslint-disable-next-line @typescript-eslint/no-empty-function
    }).catch(()=>{})
  }
  created() {
    this.structureId = router.currentRoute.query.structureId;

  }

  mounted(){

    this.opreateType=router.currentRoute.query.type;
    this.dataId= router.currentRoute.query.id;
    this.searchPrepareIds()
    this.searchFormData()
  }


  private handleSelectionChange(val) {
    console.log(val);
  }
}
</script>
<style lang="scss" scoped>
.header-tool{
  float: right;margin-top: 0px;position: relative;top: -30px;
}
.el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    top: 50px;
    width: 250px;
}
</style>
